<!--公共头部-->
{template 'aitimt/common/header'}
<style>
    body{background: #ffffff;}
    .login_box1,.login_box2{background: #FFF;border-radius: 4px;display: block;padding: 15px;position: fixed;top:3rem;width: 90%;left:5%}
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #e4e4e4;font-size: 14px;}
    ::-moz-placeholder { /* Mozilla Firefox 19+ */color: #e4e4e4;font-size: 14px;}
    ::-ms-input-placeholder { /* Internet Explorer 10-11 */color: #e4e4e4;font-size: 14px;}
    .login_head h2 {font-size: 0.8rem;line-height: 16px;margin-bottom: 16px;color:#06bf04;text-align: center;font-weight: normal}
    .mui-input-row{border-bottom: 1px solid #e4e4e4;}
    .mui-input-row input{border:0;margin: 0;}
    .btn_login{width:100%;border-radius:15px;height:2.2rem;line-height: 35px;display: block;background-color:#f39800;font-size:15px;text-align: center;margin:0.5rem auto 0;color:#FFF;}
    .btn_login:hover{color:#FFF}
    .mui-input-row label {width: 25%;}
    .mui-input-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea{width: 75%;}
    .welcome{font-size: 20px;color: #4e4e4e;}
    .mobile-set{color: #8f8f94;font-size: 13px;}
    .mobile-set input{width: 80%;}
    .mobile-find {font-size: 15px;border-bottom: 1px #e4e4e4 solid;padding-bottom: 10px;}

</style>
</head>
<body>
<div class="mui-content">
    <div class="login_box1" id="login_box1">
        <p class="welcome">请填写您要找回密码的账号</p>
        <div class="mui-input-row mobile-set">
            +86&nbsp;&nbsp;<input type="text" id='mobile' placeholder="请输入手机号"/>
        </div>

        <a class="btn_login" onclick="nextLogin(1)">下一步</a>
    </div>
    <div class="login_box2" id="login_box2" style="display: none">
        <p class="mobile-find">手机号归属地 <span id="mobile-addr" style="float: right;color: crimson;">中国大陆></span></p>
        <p class="mobile-find" id="mobile-num"></p>
        <div class="mui-input-row">
            <input type="text" id='code' style="width: 70%" placeholder="请输入验证码"/>
            <button onclick="sendSms()" id="getCode" style="width: 25%;font-size: 10px;padding: 5px 0">获取验证码</button>
        </div>
        <a class="btn_login" onclick="nextLogin(2)">下一步</a>
    </div>
    <div class="login_box1" id="login_box3" style="display: none">
        <p class="welcome" id="mobile-text"></p>
        <div class="mui-input-row">
            <input type="password" id='pwd' placeholder="请设置8-32位(数字+字母)"/>
        </div>

        <a class="btn_login" onclick="sendPwd()">保存新密码</a>
    </div>
</div>
<script type="text/javascript">

    mui.init();
    //数据发送
    function sendPwd(){
        var pwd = $.trim($("#pwd").val());
        if (pwd == '') {
            mui.toast('请输入密码');
            $('#pwd').focus();
            return false;
        }
        var sum = checkPass(pwd);
        if (sum<2){
            mui.toast('需至少8位，且包含大小写字母和数字');
            $('#pwd').focus();
            return false;
        }
        function checkPass(pass) {
            if (pass.length < 8) {
                return 0;
            }
            if (pass.length > 32) {
                return 0;
            }
            var str = 0;
            if (pass.match(/([a-z])+/)) {
                str++;
            }
            if (pass.match(/([0-9])+/)) {
                str++;
            }
            if (pass.match(/([A-Z])+/)) {
                str++;
            }
            if (pass.match(/[^a-zA-Z0-9]+/)) {
                str++;
            }
            return str;
        }
        $.post("{php echo app_url('home/index/loginpwd')}", {pwd:pwd}, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast('设置成功');
                setTimeout(function() {
                    location.href = data.url;
                },1000);
            }else{
                mui.toast('服务器错误！');
            }
        },"json");
    }
    function nextLogin(i){
        if (i==1){
            check('mobile');

        }else if(i==2) {
            check('code');
        }
    }
    function check(type) {
        var code = $.trim($("#code").val());
        var mobile = $.trim($("#mobile").val());
        if (type=='mobile'){
            var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
            if (mobile == '') {
                mui.toast('请输入手机号');
                $('#mobile').focus();
                return false;
            }
            if (!mobile_pattern.test(mobile)) {
                mui.toast('请输入正确的手机号');
                $('#mobile').focus();
                return false;
            }
            $.ajax({
                type:'get',
                url : 'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+mobile,
                dataType : 'script',
                cache: false,
                success  : function(data) {
                    document.getElementById('login_box1').style='display:none';
                    document.getElementById('mobile-addr').innerText=__GetZoneResult_.carrier+'>';
                    document.getElementById('mobile-num').innerText='+86'+ '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +mobile;
                    document.getElementById('login_box2').style='display:block';
                }
            });

        } else if(type=='code'){
            if (code == '') {
                mui.toast('请输入验证码');
                $('#code').focus();
                return false;
            }
            if (code!=localStorage.getItem('code')){
                mui.toast('验证码错误');
                $('#code').focus();
                return false;
            }
            document.getElementById('login_box2').style='display:none';
            document.getElementById('mobile-text').innerText=' 请为您的账号+86'+mobile+'设置一个新密码';
            document.getElementById('login_box3').style='display:block';

        }


    };
    function sendSms() {
        var mobile = $.trim($("#mobile").val());
        var mobile_pattern = /(?:\(?[0\+]?\d{1,3}\)?)[\s-]?(?:0|\d{1,4})[\s-]?(?:(?:13\d{9})|(?:\d{7,8}))/;
        if (mobile == '') {
            mui.toast('请输入手机号');
            $('#mobile').focus();

            return false;
        }
        if (!mobile_pattern.test(mobile)) {
            mui.toast('请输入正确的手机号');
            $('#mobile').focus();
            return false;
        }
        $.post("{php echo app_url('home/index/login1')}", {type:'sms',mobile:mobile}, function(data){
            console.log(data);
            if(data.errno == 0){
                mui.toast(data.msg);
                time();
                localStorage.setItem('code',data.code);
            }else{
                mui.toast('服务器错误！');
            }
        },"json");
    }
    var wait=60;
    function time(){
        var o=document.getElementById('getCode');
        if (wait==0) {
            o.removeAttribute("disabled");
            o.innerHTML="获取验证码";
            o.style.backgroundColor="#fff";
            wait=60;
        }else{
            o.setAttribute("disabled", true);
            o.innerHTML=wait+"(s)";
            o.style.backgroundColor="#8f8b8b";
            wait--;
            setTimeout(function(){
                time(o)
            },1000)
        }
    }
</script>
</body>
</html>
